<template>
  <div class="box">
    <div class="header">
      <span class="iconfont icon-fanhui" @click="back()"></span>
      <div class="title">一米阳光</div>
    </div>
    <div class="main">
      <p>{{ item.date }}</p>
      <div class="con">
        <div class="left">
          <img :src="item.img" alt="" />
          <p>{{ item.con }}</p>
        </div>
        <div class="right">
          <p>哪个小区的房子</p>
          <img src="../../static/头像1.jpg" alt="" />
        </div>
      </div>
    </div>
    <div class="foot">
            <img src="../../static/消息/语音.png" alt="">
            <input type="text" >
            <img src="../../static/消息/表情.png" alt="">
            <img src="../../static/消息/通话.png" alt="">
    </div>
  </div>
</template>

<script>
import "../../static/iconfont/font_g5b9ldx0nvj/iconfont.css";
export default {
  data() {
    return {
      item: {},
      value:''
    };
  },
  onLoad: function (options) {
    this.item = getApp().globalData.item;

    console.log(this.item, 111);
  },
  methods: {
    back() {
      uni.navigateBack();
    },
  },
};
</script>

<style lang='scss' scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header {
    width: 100%;
    height: 200rpx;
    background: linear-gradient(90deg, #0272f0, #36a2fe);
    display: flex;
    align-items: center;
    position: relative;
    top: 0;
    position: sticky;
    span {
      position: absolute;
      left: 40rpx;
      top: 50%;
      transform: translate(0, -50%);
      color: #fff;
    }
    .title {
      width: 100%;
      text-align: center;
      color: #fff;
    }
  }
  .main {
    width: 100%;
    height: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 1040rpx;
    .con {
      width: 100%;
      flex: 1;
      .left {
        display: flex;
        justify-content: flex-start;
        margin-left: 20rpx;
        align-items: center;
        img {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
        }
        p{
            color: #666666;
            height: 50rpx;
            font-size: 35rpx;
            line-height: 50rpx;
            margin-left: 20rpx;
        }
      }
      .right {
        display: flex;
        justify-content: flex-end;
        margin-right: 20rpx;
        align-items: center;
        img {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
        }
        p{
            color: rgb(14, 77, 14);
            height: 50rpx;
            font-size: 35rpx;
            line-height: 50rpx;
            margin-right: 20rpx;
        }
      }
    }
  }
  .foot{
      margin-bottom: 10rpx;
      width: 100%;
      height: 100rpx;
      display: flex;
      justify-content: space-around;
      background: #eee;
      align-items: center;
      img{
          width: 70rpx;
          height: 70rpx;
          border-radius: 50%;
      }
      input{
          background: #fff;
      }
      
  }
}
</style>